<template>
  <div class="photoinfo-container">
    <h3>{{photoinfo.title}}</h3>
    <p class="subtitle">
        <span>发表时间：{{photoinfo.add_time | dateFormat}}</span>
        <span>点击：{{photoinfo.click}}次</span>
    </p>
    <hr>

    <!--缩略图区域-->
    <div class="thumbs">
    <!--
    <img class="preview-img" v-for="(item,index) in list" 
    :src="'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1544369211925&di=31623b822954d289f86c090481a1beff&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2Fac4bd11373f0820207282ceb41fbfbedaa641baf.jpg'"
     height="100" @click="$preview.open(index,list)" :key="index">
     -->
     <vue-preview :slides="slide" @close="handleClose"></vue-preview>
    </div>
    <!--图片内容区域-->
        <div class="content" v-html="photoinfo.content"></div>

    <!--放置评论子组件-->
    <com-box :id="id"></com-box>
  </div>
</template>

<script>
//1.导入评论子组件
import comment from '../subcomponents/comment.vue'
export default{
    data(){
        return{
            id:this.$route.params.id,//从路由中获取到的图片id
            photoinfo:[],//图片详情,
            list:[], //缩略图的数组
            slide:[
                {
                    src: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_b.jpg',
                    msrc: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_m.jpg',
                    alt: 'picture1',
                    title: 'Image Caption 1',
                    w: 600,
                    h: 400
                },
                {
                    src: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_b.jpg',
                    msrc: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_m.jpg',
                    alt: 'picture1',
                    title: 'Image Caption 1',
                    w: 600,
                    h: 400
                }
                
            ]
        }
    },
    created() {
        this.getPhotoInfo();
        this.getThumbs();
    },
    methods:{
        getPhotoInfo(){ //获取图片的详情
        this.$http.get('api/getimageInfo/'+this.id).then(result=>{
            if(result.body.status===0){
                this.photoinfo=result.body.message[0];
            }
        })
        },
        getThumbs(){
            // 获取缩略图
            this.$http.get('api/getthumimages/'+this.id).then(result=>{
                if(result.body.status===0)
                {
                    // 循环每个图片数据，补全图片宽高
                    result.body.message.forEach(item=>{
                        item.w=600;
                        item.h=400;
                    });
                    // 把完整的数据保存到list中
                      this.list=result.body.message
                }
            })
        },
        handleClose () {
                console.log('close event')
            }
    },
    components:{ //2.注册评论子组件
        'com-box':comment
    }
}
</script>

<style lang="scss" scoped>
.photoinfo-container{
    padding:3px;
    h3{
        color:#26A2FF;
        font-size:15PX;
        text-align:center;
        margin:15px 0;
    }
    .subtitle{
        display:flex;
        justify-content:space-between;
        font-size:13px;
    }
    .content{
        font-size:13px;
        line-height:30px;
    }
    .thumbs{
        margin:10px;
        box-shadow:0 0 8px #999;
    }
}
</style>
